<template>
    <div class="mail-list-page">
        <back title="通讯录">
            <!-- <span class="add-friend iconfont icon-add-friends_icon" @click="$router.push('/addfriends')"></span> -->
        </back>
        <div class="mail-list-content">
            <ul class="friends-top">
                <li @click="$router.push('/newfriends')">
                    <i class="iconfont icon-zhucetianjiahaoyou"></i>
                    <span>新的朋友</span>
                    <label class="newtip" v-if="applyList.length > 0">{{applyList.length}}</label>
                </li>
            </ul>

            <div class="mail-list-box">
                <div v-for="(item,index) in maillist" :key="index" @click="$router.push(`/userinfo?uid=${item.uid}&id=${item.id}&union_id=${item.union_id}`)">
                    <user-item :item="item" :sendshow="false"></user-item>
                </div>
            </div>
            
        </div>
    </div>
</template>

<style lang="stylus">
.mail-list-page{
    padding-top:50px;
    height:100%;
    .add-friend{
        display: block;
        width:40px;
        height:40px;
        position: absolute;
        top:2px;
        right:0;
        font-size:18px;
        color:rgb(61, 129, 203);
    }
    .mail-list-content{
        height:100%;
        .mail-list-box{
            border-top 10px solid #eee
        }
        .friends-top{
            padding:10px 0
            li{
                display:flex;
                align-items:center;
                font-size:16px;
                height:50px;
                padding:0 5px;
                i{
                    font-size:28px;
                    width:40px;
                    height:40px;
                    background:#28aa91;
                    text-align:center;
                    line-height:40px;
                    color:#fff;
                    margin-right:5px;
                }
                .newtip{
                    background #1359b6
                    color #fff
                    display inline-block
                    width 25px
                    height 25px
                    line-height 25px
                    border-radius 50%
                    font-size 12px
                    text-align center
                    margin-left 10px
                }
            }
        }
    }
}
</style>


<script>
import userItem from '@/components/friends/item.vue'
export default {
  data() {
    return {
      maillist: [],
      applyList:[]
    }
  },
  components:{
      userItem
  },
  created(){
      this.getApplyList();
      this.getMyFriends();
  },
  methods: {
      /**
         * 好友请求
         */
        getApplyList(){
            this.$http.get(`/Message/getApplyList`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.applyList = res.data.applys
                }
            })
        },
    /**
     * 获取我的好友列表
     */
    getMyFriends(){
        this.$http.get(`/Message/getMyFriends`).then( res => {
            console.log(res)
            if(res.code == 200){
                this.maillist = res.data.friends
                this.$store.commit('setfriends',this.maillist)
            }
        })
    },
    selectItem(item) {
      console.log(item.name)
    },
    clickTitle(title) {
      console.log(title)
    }
  }
}
</script>
